<template>

  <OADialog v-model="dialogVisible" title="提示" @submit="onDeleteInform">
    <span>您确定要删除这篇通知吗？</span>
  </OADialog>

  <OAMain title="通知列表">
    <el-card>
      <el-table :data="informs">
        <el-table-column label="标题">
          <template #default="scope">
            <el-badge v-if="scope.row.reads.length == 0" is-dot class="item">
              <RouterLink :to="{ name: 'inform_detail', params: { pk: scope.row.id } }">
                {{ scope.row.title }}
              </RouterLink>
            </el-badge>
            <RouterLink v-else :to="{ name: 'inform_detail', params: { pk: scope.row.id } }">
              {{ scope.row.title }}
            </RouterLink>
          </template>
        </el-table-column>
        <el-table-column label="发布者">
          <template #default="scope">
            {{ '[' + scope.row.author.department.name + ']' + scope.row.author.realname }}
          </template>
        </el-table-column>
        <el-table-column label="发布 时间">
          <template #default="scope">
            {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="部门可见">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.public == true">公开</el-tag>
            <el-tag type="danger" v-else v-for="department in scope.row.departments" :key="department.name">
              {{ department.name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button v-if="scope.row.author.uid == authStore.user.uid" @click="onShowDialog(scope.$index)"
              type="danger" icon="Delete" />
            <el-button v-else disabled type="default">无</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <!-- <el-pagination background layout="prev, pager, next" :total="pagination.total"
          v-model:current-page="pagination.page" :page-size="10"></el-pagination> -->
        <OAPagination v-model="pagination.page" :total="pagination.total"></OAPagination>
      </template>
    </el-card>
  </OAMain>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import OAPageHeader from '@/components/OAPageHeader.vue'
import { ElMessage } from 'element-plus'
import timeFormatter from "@/utils/timeFormatter"
import OAMain from '@/components/OAMain.vue'
import OAPagination from '@/components/OAPagination.vue'
import OADialog from '@/components/OADialog.vue'
import { RouterLink } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import informHttp from '@/api/informHttp'

const authStore = useAuthStore()

let dialogVisible = ref(false)
let handleIndex = 0

let informs = ref([])
let pagination = reactive({
  total: 0,
  page: 1
})

onMounted(async () => {
  try {
    console.log(1)

    let data = await informHttp.getInformList(1)
    pagination.total = data.count
    informs.value = data.results
  } catch (detail) {
    ElMessage.error(detail)
  }
})

const onShowDialog = (index) => {
  handleIndex = index
  dialogVisible.value = true
}

const onDeleteInform = async () => {
  try {
    let inform = informs.value[handleIndex]
    await informHttp.deleteInform(inform.id)
    informs.value.splice(handleIndex, 1)
    dialogVisible.value = false
    ElMessage.success('通知删除成功！')
  } catch (detail) {
    ElseMessage.error(detail)
  }
}

</script>

<style scoped>
.el-tag {
  margin-right: 4px;
}

.el-badge {
  margin-right: 4px;
  margin-top: 4px;
}
</style>